<template>
    <div class="pack">
        <!--        <div class="tree_container">
                    <h3>机构列表</h3>
                    <div class="treePack">
                        <Tree :data="organizationTreeData" @on-select-change="organizationTreeChange"></Tree>
                    </div>
                </div>-->
        <div class="detail_container">
            <h3>角色管理</h3>
            <div class="hunttool">
                <Input v-model="valueEsName" size="small" placeholder="角色名称" class="hunt"></Input>
                <Button type="primary" icon="ios-search" size="small" @click="searchData">查询</Button>
                <!--<Button type="ghost" icon="ios-trash-outline" size="small" class="deltebtn" @click="batchDelete">批量删除</Button>-->
                <Button type="ghost" icon="ios-plus-empty" size="small" class="addbtn" @click="addnew">新增</Button>
            </div>
            <div class="compile">
                <Table stripe border :columns="columns" :data="tabledata"></Table>
            </div>
            <div class="page_container">
                <Page :current="pageNo" :total="totalCount" size="small" simple class="page_btn"
                      @on-change="pageChange"></Page>
                <P class="page_text">共{{totalCount}}条</P>
            </div>
        </div>
        <!--新增、查看、修改弹出框-->
        <Modal v-model="compile" :title="compiletitle" :closable="false" :mask-closable="false">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100"
                  style="margin-right: 20px">
                <Form-item label="角色名称" prop="name">
                    <Input v-model="formValidate.name" placeholder=""></Input>
                </Form-item>
            </Form>
            <Card dis-hover>
                <p slot="title">权限授权</p>
                <div style="height: 300px;padding: 10px;overflow: auto">
                    <Tree :data="authorityTreeData" show-checkbox @on-check-change="treeCheck"></Tree>
                </div>
            </Card>
            <div slot="footer">
                <Button type="ghost" @click="compileCancel()">取消</Button>
                <Button type="primary" :loading="noteing" @click="compileSubmit('formValidate')">提交</Button>
            </div>
        </Modal>
    </div>
</template>
<script type="text/javascript">
    var ezjsUtil = Vue.ezjsUtil;
    var apiConstants = ezjsUtil.constants.api;
    export default {
        components: {},
        data() {
            const validateName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('角色名称不能为空'));
                } else {
                    var _this = this;
                    ezjsUtil.request(apiConstants.authority_flipListForPersonnelCheck,
                        { },
                        function (err, data) {
                            if (err) {
                                return;
                            }
                            var isexist=false;
                            for(let i=0;i<data.length;i++){
                                if(value==data[i].name && _this.formValidate.id!=data[i].id){
                                    isexist=true;
                                }
                            }
                            if(isexist){
                                callback(new Error('角色名称已存在'));
                            }else {
                                callback();
                            }
                            console.log(value);
                            console.log(_this.formValidate.id);
                            console.log(data);
//                            _this.authorityFlipListForPersonnel();
                        }
                    )
                }
            };
            return {
                noteing: false,
                //权限树
                authorityTreeData: [],
                authorityTreeDataCopy: '',
                //新增、修改、查看弹出框
                compile: false,
                compiletitle: "角色管理",
                //记录批量删除id
                compiledele: "",
                /*                //记录权限树勾选ID
                                authorityTreeID:'',*/
                //当前页
                pageNo: 1,
                //总共多少页
                totalPage: '',
                //表格总共记录数
                totalCount: 0,
                //检验记录弹窗
                inspectionRecord: false,
                //查询物资名称
                valueEsName: '',
                //下拉列表
                esTypeList: "",
                //物资类型下拉列表数据
                esTypeListData: [],
                //表格头部信息
                columns: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '角色名称',
                        key: 'name',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 220,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.amend(params.row);
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.authorityRemoveByIdsForPersonnel(params.row.id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                //表格数据
                tabledata: [],
                //新增表单
                formValidate: {
                    id: '',
                    permissionId: '',
                    name: '',
                },
                //表单验证
                ruleValidate: {
                    name: [
                        {required: true, validator: validateName, trigger: 'blur'}
                    ],
                },
            }
        },
        computed: {},
        created() {
            this.authorityFlipListForPersonnel();
        },
        methods: {
            tmUsageDate(date) {
                this.formValidate.tmUsage = date;
            },
            serviceLifeDate(date) {
                this.formValidate.serviceLife = date;
            },
            //提示信息
            instance() {
                const title = '提示';
                const content = '<p>请在机构列表选择机构单位！</p>';
                this.$Modal.info({
                    title: title,
                    content: content
                });
            },
            //日期格式转换
            dateformatting(dateval) {
                var newTime = new Date(dateval);
                var yyyy = newTime.getFullYear();
                var MM = newTime.getMonth() + 1;
                var dd = newTime.getDate();
                var hh = newTime.getHours();
                var mm = newTime.getMinutes();
                var ss = newTime.getSeconds();
                var time = yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
                return time
            },

            treeCheck(val) {
                var ids = [];
                for (var i = 0; i < val.length; i++) {
                    ids.push(val[i].id);
                }
                this.formValidate.permissionId = ids.join(",");
            },

            //搜索
            searchData() {
                this.pageNo = 1;
                this.authorityFlipListForPersonnel();
            },
            //新增
            addnew() {
                this.formValidate.id = "";
                this.authorityFlipListForPermission();
                this.compile = true;
            },
            //修改
            amend(val) {
                this.formValidate.id = val.id;
                this.formValidate.name = val.name;
                this.authorityFlipListForPermission();
                this.compile = true;
            },
            //修改树选中状态
            amendTreeCheck(json, val) {
                if (json != null) {
                    for (var i = 0; i < json.length; i++) {
                        if (json[i].id == val) {
                            json[i].checked = true;
                        }
                        this.amendTreeCheck(json[i].children, val);
                    }
                } else {
                    return
                }
            },
            //新增,修改提交
            compileSubmit(name) {
                if (this.formValidate.permissionId) {
                    this.noteing = true;
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            var _this = this;
                            ezjsUtil.request(apiConstants.authority_editForPersonnel,
                                {
                                    id: _this.formValidate.id,
                                    permissionId: _this.formValidate.permissionId,
                                    name: _this.formValidate.name
                                },
                                function (err, data) {
                                    if (err) {
                                        return;
                                    }
                                       _this.formValidate.id = "";
                                       _this.pageNo = 1;
                                       _this.authorityFlipListForPersonnel();
                                       _this.noteing = false;
                                       _this.$Message.success('提交成功!');
                                       _this.compile = false;
                                       _this.formValidate.permissionId = '';
                                       _this.compileReset('formValidate');
                                       _this.authorityTreeData = [];
                                }
                            )

                        } else {
                            this.noteing = false;
                            this.$Message.error('表单验证失败!');
                        }
                    })
                } else {
                    this.$Modal.info({
                        title: '提示',
                        content: '<p>请选择授权权限！</p>'
                    });
                }
            },
            //表单重置
            compileReset(name) {
                this.$refs[name].resetFields();
            },
            //表格勾选
            compileSelect(selection, row) {
                var ids = "";
                for (var i = 0; i < selection.length; i++) {
                    ids = selection[i].id + "," + ids;
                }
                this.compiledele = ids
            },
            //批量删除
            batchDelete() {
                this.authorityRemoveByIdsForPersonnel(this.compiledele);
            },
            //表单取消
            compileCancel() {
                this.authorityTreeData = [];
                if (this.formValidate.id !== "") {
                    this.formValidate.permissionId = '',
                        this.compileReset('formValidate');
                }
                this.compile = false;
            },
            //分页改变时
            pageChange(val) {
                if (val <= this.totalPage) {
                    this.pageNo = val;
                    this.authorityFlipListForPersonnel();
                }
            },
            //查询角色列表
            authorityFlipListForPersonnel() {
                var _this = this;
                ezjsUtil.request(apiConstants.authority_flipListForPersonnel,
                    {
                        name: _this.valueEsName,
                        pageNo: _this.pageNo
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.tabledata = data.listInfo;
                        _this.totalCount = data.flipInfo.totalCount;
                        _this.totalPage = data.flipInfo.totalPage;
                    }
                )
            },
            //查询角色权限
            authorityDetailForPersonnel() {
                var _this = this;
                ezjsUtil.request(apiConstants.authority_detailForPersonnel,
                    {
                        personnelId: _this.formValidate.id
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        var ids = "";
                        for (var i = 0; i < data.length; i++) {
                            ids = data[i].permissionId + "," + ids;
                            _this.amendTreeCheck(_this.authorityTreeData, data[i].permissionId);
                        }
                        _this.formValidate.permissionId = ids;
                    }
                )
            },

            //批量删除物资登记
            authorityRemoveByIdsForPersonnel(delid) {
                var _this = this;
                ezjsUtil.request(apiConstants.authority_removeByIdsForPersonnel,
                    {
                        ids: delid
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.authorityFlipListForPersonnel();
                    }
                )
            },

            //获取树
            authorityFlipListForPermission() {
                var _this = this;
                ezjsUtil.request(apiConstants.authority_flipListForPermission,
                    {},
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.authorityTreeData = data;
                        _this.authorityTreeData[0].expand = true;
                        _this.authorityDetailForPersonnel();
                    }
                )
            },
        },
        mounted() {
        }
    }
</script>
<style lang="less" scoped>
    .pack {
        width: 100%;
        height: 100%;
    }

    .tree_container {
        width: 260px;
        height: 100%;
        float: left;
        border: 1px solid #d3d8e0;

    h3 {
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #6e6d6d;
    }

    }
    .detail_container {
        height: 100%;
        /*margin-left: 280px;*/
        overflow: hidden;
        overflow-y: auto;
    }

    h3 {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #d3d8e0;
    }

    .treePack {
        height: 94%;
        padding: 10px;
        overflow: auto;
    }

    .hunttool {
        padding: 15px 0;

    .addbtn {
        margin-right: 6px;
        float: right;
    }

    .deltebtn {
        margin-right: 6px;
        float: right;
    }

    }
    .hunt {
        width: 14rem;
    }

    .page_container {
        height: 30px;
        margin-top: 20px;

    .page_btn {
        float: right;
    }

    .page_text {
        float: right;
        line-height: 26px;
    }

    }
</style>